<template>
    <div class="dialog-rectify">
        <el-dialog :visible.sync="isShow" :title="headerTitle" @close="handleClose" center top="14vh" width="80%" :fullscreen="fullscreen">
            <el-form :model="dialogForm" size="small" label-suffix=":" :inline="true" ref="detailForm" :rules="rules" label-width="80px">
                <el-row>
                    <!-- <el-col :span="6">
                        <el-form-item label="MRB单号">
                            {{dialogForm.row.ncrOrder}}
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="6">
                        <el-form-item :label="$t('mrbForm.materialNo')">
                            {{dialogForm.row.materialCode}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item :label="$t('mrbForm.materialName')">
                            {{dialogForm.row.materialName}}
                        </el-form-item>
                    </el-col>

                    <el-col :span="6">
                        <el-form-item :label="$t('mrbForm.supplierBatchNo')">
                            {{dialogForm.row.lichn}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item :label="$t('mrbForm.batchNo')">
                            {{dialogForm.row.lot}}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item :label="$t('mrbForm.supplierNo')">
                            {{dialogForm.row.supplierCode}}
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="6">
                        <el-form-item label="物料类型">
                            {{dialogForm.row.materialType}}
                        </el-form-item>
                    </el-col> -->

                    <el-col :span="6">
                        <el-form-item :label="$t('mrbForm.initiateFactory')">
                            {{dialogForm.row.factoryName}}
                        </el-form-item>

                    </el-col>
                    <el-col :span="6">
                        <el-form-item :label="$t('mrbForm.incomingQuantity')">
                            {{dialogForm.row.batchAmount}}
                        </el-form-item>
                    </el-col>

                    <el-col :span="6">
                        <el-form-item :label="$t('mrbForm.unqualifiedQuantity')">
                            {{dialogForm.row.onlineUnqualified}}
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-table max-height="350" border stripe :data="dialogForm.stemVoList">
                <el-table-column :label="$t('public.serialNum')" type="index" width="55" align="center" />
                <!--      <el-table-column label="供应商批次" prop="lichn" align="center" show-overflow-tooltip />-->
                <!--      <el-table-column label="供应商编号" prop="supplierCode" align="center" show-overflow-tooltip />-->
                <!--      <el-table-column label="物料编号" prop="materialCode" align="center" show-overflow-tooltip />-->
                <!--      <el-table-column label="物料名称" prop="materialName" align="center" show-overflow-tooltip />-->
                <!--      <el-table-column label="物料类型" prop="materialType" align="center" show-overflow-tooltip />-->
                <!--      <el-table-column label="厂区" prop="factoryName" align="center" show-overflow-tooltip />-->
                <!--      <el-table-column label="批次" prop="lot" align="center" show-overflow-tooltip />-->
                <!--      <el-table-column label="来料数量" prop="batchAmount" align="center" show-overflow-tooltip />-->
                <el-table-column :label="$t('mrbForm.flawType')" prop="flaw" align="center" show-overflow-tooltip />
                <el-table-column :label="$t('mrbForm.containAddress')" prop="stemName" align="center" show-overflow-tooltip v-if="dialogForm.whetherStem == 1">
                    <template slot-scope="scope">
                        <div v-for="(item,index) in scope.stemVoList" :key="index">
                            <div v-if="item.stemName && item.stemNumber">{{item.stemName}} / {{item.stemNumber}}</div>
                        </div>
                    </template>
                </el-table-column>
                <!--      <el-table-column label="不合格数量" prop="onlineUnqualified" align="center" show-overflow-tooltip />-->
                <el-table-column fixed="right" :label="$t('mrbForm.SQEDecision')" prop="onlineUnqualified" align="center" width="170px">
                    <template slot-scope="scope">
                        <el-radio-group v-model="scope.row.isCom" :disabled="scope.row.isCom == 4" @change="handleChange(scope.row)" class="decision-radio">
                            <el-radio size="mini" label="1">投诉</el-radio>
                            <el-radio size="mini" label="0">不投诉</el-radio>
                        </el-radio-group>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" :label="$t('mrbForm.ComplaintContent')" prop="" align="center" width="100px">
                    <template slot-scope="scope">
                        <div class="action-wrap">

                            <table-body-btn v-if="scope.row.status == 2" type="gwedit" :name="$t('public.edit')" @click.native="handleView(scope.row)" v-hasPermi="['ny-iqc:ncrReview:getInfo']" />
                            <table-body-btn v-if="scope.row.status > 2" type="gwview" :name="$t('public.view')" @click.native="handleView(scope.row)" v-hasPermi="['ny-iqc:ncrReview:getInfo']" />
                        </div>
                    </template>
                </el-table-column>

                <el-table-column fixed="right" :label="$t('mrbForm.progress')" align="center" width="160px">
                    <template slot-scope="scope">
                        <div> {{formatProcess(scope.row)}}</div>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" :label="$t('mrbForm.rectificationResultsStatus')" align="center" width="160px">
                    <template slot-scope="scope">
                        <div> {{formatResult(scope.row)}}</div>
                    </template>
                </el-table-column>

            </el-table>
            <!--    <div slot="footer" class="dialog-footer">-->
            <!--      <el-button  @click="$emit('update:visible',false)" :loading="loading" icon="el-icon-document" size="small">{{$t('public.cancel')}}</el-button>-->
            <!--      <el-button style="background:#20B09F" type="primary" @click="submitForm" :loading="loading" icon="el-icon-document-checked" size="small">{{$t('public.save')}}</el-button>-->
            <!--    </div>-->
        </el-dialog>
        <dialog-sqe :visible.sync="visibleSQE" :data="dialogForm"></dialog-sqe>
    </div>
</template>

<script>
import {getRectificationList, setNoSend,} from '@/api/inventoryManagement/ncrReview'
import DialogSqe from './dialogSQE.vue'

// import * as Api from '@/api/auditimple/auditimple.js'
export default {
    name: 'dialogRectify',
    components: { DialogSqe },
    dicts: [
        'NYIQC_NCR_STATUS',
        'NYIQC_RECTIFICATION_STATUS',
        'NYIQC_RECTIFICATION_RESULTSTATE',
    ],
    props: {
        value: [String],
        data: [Object],
        // executeId:{
        //   type: String
        // },
        visible: {
            type: Boolean,
            default: false,
        },
        // type:[String,Number] //1:新增  2：编辑 3：查看
    },
    watch: {
        visible: {
            handler(val) {
                if (val) {
                    this.getDetail()
                }
            },
            immediate: true,
        },
        visibleSQE(val) {
            if (!val) {
                this.getDetail()
            }
        },
    },
    computed: {
        isShow: {
            get() {
                return this.visible
            },
            set() {},
        },
        headerTitle() {
            return this.$t('mrbForm.RectificationForm')
        },
    },
    data() {
        return {
            model: '',
            loading: false,
            visibleSQE: false,
            fullscreen: false,
            deviceOptions: undefined,
            factoryOptions: undefined,
            dialogForm: { row: {} },
            stateMap: {
                0: '待处理',
                1: '不投诉',
                2: '确认投诉(未提交)',
                3: '已提交',
                4: '已关闭',
            },
            // 表单校验
            rules: {},
        }
    },
    methods: {
        formatResult(row) {
            const current =
                this.dict.type.NYIQC_RECTIFICATION_RESULTSTATE.find(
                    (io) => {
                        return io.value === row.resultState
                    }
                )
            console.log(current, '============current')
            return current ? current.label : ''
        },
        formatProcess(row) {
            const current = this.dict.type.NYIQC_RECTIFICATION_STATUS.find(
                (io) => {
                    return io.value === row.status
                }
            )
            console.log(current, '============current')
            return current ? current.label : ''
        },
        handleChange(row) {
            if (row.isCom == '1') {
                if (row.status == '4') {
                    this.$modal.msgWarning('投诉已关闭，无法更改！')
                    row.isCom = '1'
                    return
                }
                this.visibleSQE = true
                this.dialogForm.detail = row
            } else if (row.isCom == '0') {
                if (row.status == '4') {
                    this.$modal.msgWarning('投诉已关闭，无法更改！')
                    row.isCom = '1'
                    return
                }
                if (row.status == '3') {
                    this.$modal.msgWarning('投诉已提交，无法更改！')
                    row.isCom = '1'
                } else {
                    this.$modal.confirm('是否确认不投诉？').then(
                        () => {
                            this.setNoSend(row)
                        },
                        () => {
                            if (row.status == '0') {
                                row.isCom = '2'
                            } else {
                                row.isCom = '1'
                            }
                        }
                    )
                }
            }
        },
        setNoSend(row) {
            setNoSend(row.id).then((res) => {
                this.$modal.msgSuccess('操作成功!')
                this.getDetail()
            })
        },
        handleView(row) {
            this.visibleSQE = true
            this.dialogForm.detail = row
        },
        getDetail() {
            // 1578573604841926657
            getRectificationList(this.data.id).then((res) => {
                if (res.code == 200) {
                    this.dialogForm.row = this.data
                    this.dialogForm.stemVoList = res.data.map((i) => {
                        if (i.status == '1') {
                            i.isCom = '0'
                        }
                        if (
                            i.status == '2' ||
                            i.status == '3' ||
                            i.status == '4'
                        ) {
                            i.isCom = '1'
                        }
                        return i
                    })
                    this.$forceUpdate()
                }
            })
        },
        /** 发起提交 */
        submitForm: function () {
            this.loading = true
            this.$refs.detailForm.validate((valid) => {
                if (valid) {
                    // Api.setAuditRemark({remark: this.model ,executeId: this.executeId()}).then(res=>{
                    //   this.loading = false
                    //   if(res.code == 200){
                    //     this.$modal.msgSuccess("操作成功!");
                    //     this.$emit('update:visible',false)
                    //     const executeId = this.executeId()
                    //     let result = this.data.find(i=>i.executeId==executeId)
                    //     result.remark = this.model
                    //   }else{
                    //     this.$modal.msgError(res.msg);
                    //   }
                    // })
                }
            })
        },
        handleClose(done) {
            this.model = ''
            this.$emit('update:visible', false)
        },
    },
}
</script>

<style scoped lang="scss">
::v-deep .el-dialog__title {
    border-left: none;
}
::v-deep .el-dialog__title::before {
    display: inline-block;
    width: 4px;
    height: 15px;
    vertical-align: middle;
    margin-right: 10px;
    background: #0b7be3;
    border-radius: 2px;
    content: '';
}
.decision-radio ::v-deep .el-radio {
    margin-right: 10px;
}
.dialog-rectify ::v-deep .el-form-item {
    display: inline-flex;
    width: 100%;
    .el-form-item__content {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
}
</style>
